﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Celestial Home - Extracting every detail of your dream</title>
        <link rel="Stylesheet" type="text/css" href="css/master.css" />
        <link rel="Stylesheet" type="text/css" href="css/forms.css" />
        <link rel="Stylesheet" type="text/css" href="css/billing.css" />
        <link rel="Stylesheet" type="text/css" href="css/login.css" />

        <script type="text/javascript" src="javascripts/helpers.js"></script>
        <script type="text/javascript" src="javascripts/login.js"></script>
        <script type="text/javascript" src="javascripts/register.js"></script>
        <script type="text/javascript" src="javascripts/shoppingcart.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                if (checkLogin()) {
                    customerData = getCookie('customerData');
                    if (customerData != "") {
                        customerData = customerData.split("///");
                        document.getElementById("txtFirstName").value = customerData[0];
                        document.getElementById("txtLastName").value = customerData[1];
                        document.getElementById("txtEmail").value = customerData[2];
                        document.getElementById("txtCreditCardNumber").value = customerData[3].substring(0, 4) + "************";
                        document.getElementById("selCreditCardType").value = customerData[4];
                        document.getElementById("txtCreditCardHolder").value = customerData[5];
                        document.getElementById("txtCreditCardCVV").value = customerData[6];
                        document.getElementById("selDeliveryDate").value = customerData[7];
                        document.getElementById("selCountry").value = customerData[8];
                        document.getElementById("txtCity").value = customerData[9];
                        document.getElementById("txtState").value = customerData[10];
                        document.getElementById("txtAddressLine1").value = customerData[11];
                        document.getElementById("txtAddressLine2").value = customerData[12];
                        document.getElementById("txtPostalCode").value = customerData[13];
                        document.getElementById("selShippingCountry").value = customerData[14];
                        document.getElementById("txtShippingCity").value = customerData[15];
                        document.getElementById("txtShippingState").value = customerData[16];
                        document.getElementById("txtShippingAddressLine1").value = customerData[17];
                        document.getElementById("txtShippingAddressLine2").value = customerData[18];
                        document.getElementById("txtShippingPostalCode").value = customerData[19];
                    }
                    else {
                        fillBillingAndShippingInfo();
                    }
                }
                else {
                    document.getElementById("divError").style.display = "block";
                    document.getElementById("divError").innerHTML = "You have to be logged in checkout your items! Please login <a href=\"login.html\">here</a>. :)";
                    document.getElementById("placeOrder").style.display = "none";
                }
            }
        </script>
    </head>
    <body>

        <div id="divTitle">
            <div id="divCustMenu">
                <img src="images/user.png" alt="user" /><a id="aLogin" href="login.html">Login</a> |
                <img src="images/profile.png" alt="profile" /><a id="aProfile" href="particulars.html">My Profile</a> |
                <img src="images/cart.png" alt="cart" /><a href="construct.html">My Cart</a> |
                <img src="images/checkout.png" alt="checkout" /><a href="construct.html">Checkout</a>
            </div><!--ends divCustmenu-->
            <div id="divWelcome"></div>
        </div><!--ends divTitle-->

        <!-- Navigation Bar - common for all pages -->
        <div id="divNavBar">
            <ul id="ulNavBar">
                <li><img src="images/home.png" alt="home"/><a href="index.html"> Home</a></li>
                <li><img src="images/briefcase.png" alt="home"/><a href="about.html"> About Us</a></li>
                <li><img src="images/chair.png" alt="home"/><a href="construct.html"> Products</a>
                    <ul>
                        <li><a href="construct.html">Bed Room</a>
                            <ul>
                                <li><a href="construct.html">Beds</a></li>
                                <li><a href="construct.html">Wardrobes</a></li>
                            </ul>
                        </li>
                        <li><a href="construct.html">Dining Room</a>
                            <ul>
                                <li><a href="construct.html">Chairs</a></li>
                                <li><a href="construct.html">Dining Tables</a></li>
                                <li><a href="construct.html">Dining Table Sets</a></li>
                            </ul>
                        </li>
                        <li><a href="construct.html">Living Room</a>
                            <ul>
                                <li><a href="construct.html">Coffee Tables</a></li>
                                <li><a href="construct.html">Sofa</a></li>
                                <li><a href="construct.html">Sofa Sets</a></li>
                                <li><a href="construct.html">TV Cabinets</a></li>
                            </ul>
                        </li>
                        <li><a href="construct.html">Study Room</a>
                            <ul>
                                <li><a href="construct.html">Desks</a></li>
                                <li><a href="construct.html">Book Shelves</a></li>
                            </ul>
                        </li>
                    </ul>
                </li> <!--ends Products menu-->
                <li><img src="images/design.png" alt="home"/><a href="construct.html"> Design</a>
                    <ul>
                        <li><a href="construct.html">Wardrobe</a></li>
                        <li><a href="construct.html">Home Theatre</a></li>
                    </ul>
                </li> <!--ends design menu-->
                <li><img src="images/earth.png" alt="home"/><a href="construct.html"> Support</a>
                    <ul>
                        <li ><a href="contact.html">Contact Us</a></li>
                        <li><a href="construct.html">Track Your Order</a></li>
                    </ul>
                </li> <!--ends support menu-->
            </ul>  <!--ends navigation menu-->
        </div> <!--ends navigation division-->

        <div id="divMain">
            <div class="divFormsWrap">
                <p>&gt;Edit Cart &gt; <u>Billing and Shipping </u></p>
                <p style="font-size: 10pt; color: red;" align="center">Please take note that all fields are mandatory</p>
                <div id="divError"></div>
                <form method="post" action="#">
                    <fieldset id="fsetCustomerParticulars">
                        <p class="pLegend">Customer Particulars</p>
                        <label>First Name:</label>
                        <input size="18" type="text" id="txtFirstName" disabled/><br/>
                        <label>Last Name:</label>
                        <input size="18" type="text" id="txtLastName" disabled /><br/>
                        <label>Email:</label>
                        <input size="18" type="text" id="txtEmail" disabled /><br/>
                    </fieldset><!--ends fsetCustomerParticulars-->

                    <fieldset id="fsetBillingInformation" class = "fsetExtended">
                        <p class="pLegend">Billing Information</p>
                        <label>Credit Card No:</label>
                        <input type="text" id="txtCreditCardNumber" onkeypress="return looseNumbersOnly(event)" maxlength="20" onchange="validate(this)"/>
                        <div id="divCreditCardNumberError" class="divError"></div><br/>

                        <label>Card Type:</label>
                        <select id="selCreditCardType" onchange="validate(this)">
                            <option value="-1">Select</option>
                            <option value="1">American Express</option>
                            <option value="2">MasterCard</option>
                            <option value="3">Visa</option>
                        </select>
                        <div id="divCreditCardTypeError" class="divError"></div><br/>


                        <label>CV Code:</label>
                        <input type="text" id="txtCreditCardCVV" /><br/>


                        <label>Card Holder Name: </label>
                        <input type="text" id="txtCreditCardHolder" /><br/>
                        <br/>
                        <label>Country:</label>
                        <select class="ipBoxes" id="selCountry">
                            <option value="00">Select</option>
                            <option value="AU">Australia</option>
                            <option value="CN">China</option>
                            <option value="HK">Hong Kong</option>
                            <option value="IN">India</option>
                            <option value="JP">Japan</option>
                            <option value="SG">Singapore</option>
                            <option value="MY">Malaysia</option>
                        </select>
                        <br />
                        <label>City:</label><input id="txtCity" type="text" maxlength="30" class="ipBoxes" />
                        <br />
                        <label>State:</label><input id="txtState" type="text" maxlength="30" class="ipBoxes" />
                        <br />
                        <label>Address Line 1:</label><input id="txtAddressLine1" type="text" maxlength="30" class="ipBoxes" />
                        <br />
                        <label>Address Line 2:</label><input id="txtAddressLine2" type="text" maxlength="30" class="ipBoxes" />
                        <br />
                        <label>Postal Code:</label><input id="txtPostalCode" type="text" maxlength="10" onkeypress="return looseNumbersOnly(event)"/>
                    </fieldset><!--ends fsetBillingInformation-->
                    <fieldset id="fsetShippingInformation">
                        <p class="pLegend"><u>Shipping Information </u></p>
                        <div  align="center"><a href="javascript:sameAsBilling()">Use same address as billing</a><br/></div>
                        <label>Country:</label>
                        <select id="selShippingCountry" style="width: 160px;">
                            <option value="00">Select</option>
                            <option value="AU">Australia</option>
                            <option value="CN">China</option>
                            <option value="HK">Hong Kong</option>
                            <option value="IN">India</option>
                            <option value="JP">Japan</option>
                            <option value="SG">Singapore</option>
                            <option value="MY">Malaysia</option>
                        </select>
                        <br />
                        <label>City:</label><input id="txtShippingCity" type="text" maxlength="30" style="width: 160px;"/>
                        <br />
                        <label>State:</label><input id="txtShippingState" type="text" maxlength="30" style="width: 160px;"/>
                        <br />
                        <label>Address Line 1:</label><input id="txtShippingAddressLine1" type="text" maxlength="30" style="width: 160px;"/>
                        <br />
                        <label>Address Line 2:</label><input id="txtShippingAddressLine2" type="text" maxlength="30" style="width: 160px;"/>
                        <br />
                        <label>Postal Code:</label><input id="txtShippingPostalCode" type="text" maxlength="10" onkeypress="return looseNumbersOnly(event)"/>
                        <br/>
                        <br/>
                        <label>Delivery Date:</label>
                        <script language="javascript" type="text/javascript">
                            <!--
                            var myDate=new Date();
                            document.writeln("<select id='selDeliveryDate'>")
                            myDate.setDate(myDate.getDate()+7);
                            for (var i= 0; i < 6; i ++) {
                                document.writeln("<option>"+myDate.getDate() + "/" + (myDate.getMonth()+ 1) + "/" + myDate.getFullYear()+"</option> ");
                                myDate.setDate(myDate.getDate()+1);
                            }
                            document.writeln("</select>");
                            
                            //-->
                        </script>
                        <br/>
                        <label>* Please understand that processing your order requires 7 days. :) <br/>
                            Sorry for any inconvenience caused.</label>

                    </fieldset><!--ends fsetShippingInformation-->
                    <br/>
                    <div align="center" style="margin-top: 50px;"><a href="cart.html">Back</a>&nbsp; &nbsp; <a id="placeOrder" href="javascript: placeOrder()">Next</a></div>
                    <input id="done" type="hidden"></input>
                    <input id="creditCardCheck" type="hidden"></input>
                    <input id="lala" type="hidden"></input>
                </form>
            </div> <!-- ends divFormsWrap -->
        </div> <!-- ends divMain -->

        <div id="divFooter">
            <div id="divFooterLeft">&#169 Copyright 2010 Celestial Home</div>
            <div id="divFooterRight"> Site Design by <a href="#" id="aDreamArchitect"><img src="images/dream.png" alt="Dream Architect"/></a></div>
            <div id="divFooterCenter"><img src="images/visa.gif" alt=""/><img src="images/paypal.png" alt="" /></div>
        </div><!--ends divFooter-->

    </body>
</html>
